<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0
    }
    body{
        background: url('./img/servant/bg-common.jpg');
    }
    .servant{
        min-width: 1160px;
    }
    .servant .title{
        width: 980px;
        margin: 0 auto;
        margin-top: 45px;
        padding-left: 45px;
        background: url('./img/servant/icon-title-big.png') left center no-repeat
    }
    .servant .title h3{
        font-size: 45px;
        background-image: -webkit-linear-gradient(top, #1e2f68 30%, #0f0811 70%);
       -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    .servant .title p{
        font-size: 28px;
        color: #151834;
        min-height: 35px;
        background-image: -webkit-linear-gradient(top, #1e2f68 30%, #0f0811 70%);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
    }
    .servant .ser_class{
        width: 100%;
        height: 890px;
        margin: -50px 0  80px 0;
    }
    .servant .ser_class ul{
        height: 890px;
        list-style: none;
        text-align: center;
        position: relative;
    }
    .servant .ser_class ul li{
        width: 980px;
        display: block;
        margin: 0 auto;
        position: relative;
        opacity: 0;
        z-index: 0;
        transition: opacity .5s ease-in-out
    }
    .servant .ser_class li img{
        position: absolute;
        top: 0;
        left: 0;

    }
    .servant .ser_class li.show{
        z-index: 1;
        opacity: 1;
    }
    .servant .ser_class>div{
        width: 980px;
        height: 0;
        margin: 0 auto;
        position: relative;
    }
    .servant .ser_class>div>div{
        cursor: pointer;
    }
    .servant .ser_class .right{
        width: 41px;
        height: 85px;
        background: url(./img/servant/path.png);
        position: relative;
        display: inline-block;
        left: -60px;
        top: -540px;
        z-index: 5;
    }
    .servant .ser_class .left{
        position: relative;
        display: inline-block;
        width: 41px;
        height: 85px;
        background: url(./img/servant/path.png) center right;
        left: 100%;
        top: -540px;
        z-index: 5;
    }


    .servant .scroll span:nth-child(3){
        cursor: pointer;
    }

    .servant .scroll span:nth-child(5){
        cursor: pointer;
    }

    .servant .scroll{
        width: 1200px;
        height: 105px;
        margin: 0 auto;
        background: url('./img/servant/role-span.png') no-repeat;
        overflow: hidden;
        padding-top: 40px;
        position: relative;
        top: -220px;
        left: 20px;
        z-index: 5;
    }
    .servant .scroll>div{
        width: 2420px;
        float: left;
        position: relative;
        left: -255px;
    }
    .servant .scroll span{
        width: 240px;
        height: 70px;
        padding-right: 2px;
        float: left;
        display: block;
        background: url(./img/servant/role-name.png) no-repeat;
    }
    .servant .scroll span.ser_1{
        background-position: -255px 0px;
    }
    .servant .scroll span.ser_1.show{
        background-position: 0px 0px;
    }
    .servant .scroll span.ser_2{
        background-position: -255px -70px;
    }
    .servant .scroll span.ser_2.show{
        background-position: 0px -70px;
    }
    .servant .scroll span.ser_3{
        background-position: -255px -140px;
    }
    .servant .scroll span.ser_3.show{
        background-position: 0px -140px;
    }
    .servant .scroll span.ser_4{
        background-position: -255px -210px;
    }
    .servant .scroll span.ser_4.show{
        background-position: 0px -210px;
    }
    .servant .scroll span.ser_5{
        background-position: -255px -280px;
    }
    .servant .scroll span.ser_5.show{
        background-position: 0px -280px;
    }
    .servant .scroll span.ser_6{
        background-position: -255px -350px;
    }
    .servant .scroll span.ser_6.show{
        background-position: 0px -350px;
    }
    .servant .scroll span.ser_7{
        background-position: -255px -420px;
    }
    .servant .scroll span.ser_7.show{
        background-position: 0px -420px;
    }
    .servant .scroll span.ser_8{
        background-position: -255px -490px;
    }
    .servant .scroll span.ser_8.show{
        background-position: 0px -490px;
    }
    .servant .scroll>div{
        position: relative;
    }
    .servant .scroll>div:nth-child(1){
        position: relative;
        /* left: 0;
        transition: left .5s linear */
        /* animation: move 6s infinite linear */
    }

    /* @keyframes move{
        0%{
            left: 0;
        }
        5%{
            left: -255px;
        }
        99.9%{
            left:-255px
        }
        100%{
            left: 0px;
        }
    } */



    /* 两位从者显示切换效果 */
    .servant .ser_class li img.show{
        z-index: 5;
    }
</style>
<body>
    <div class="servant">
        <div class="title">
            <h3>从者信息</h3>
            <p>Servant</p>
        </div>
        <div class="ser_class">
            <ul>
                <li class="ser_1"><img src="./img/servant/role-1.png" alt=""><img src="./img/servant/role-1-1.png" alt=""></li>
                <li class="ser_2"><img src="./img/servant/role-2.png" alt=""><img src="./img/servant/role-2-2.png" alt=""></li>
                <li class="ser_3"><img src="./img/servant/role-3.png" alt=""></li>
                <li class="ser_4 show"><img src="./img/servant/role-4.png" alt=""></li>
                <li class="ser_5"><img src="./img/servant/role-5.png" alt=""></li>
                <li class="ser_6"><img src="./img/servant/role-6.png" alt=""></li>
                <li class="ser_7"><img src="./img/servant/role-7.png" alt=""></li>
                <li class="ser_8"><img src="./img/servant/role-8.png" alt=""></li>
            </ul>
            <div>
                <div class="right"></div>
                <div class="left"></div>
            </div>
        </div>
        <div class="scroll">
            <div>
                <span class="ser_1"></span>
                <span class="ser_2"></span>
                <span class="ser_3"></span>
                <span class="ser_4"></span>
                <span class="ser_5"></span>
                <span class="ser_6"></span>
                <span class="ser_7"></span>
                <span class="ser_8"></span>
            </div>
        </div>
    </div>
    <script src="./js/jquery-1.11.3.js"></script>
    <script>
        $('.servant .scroll>div>span:nth-child(4)').addClass("show")
        
        $('.servant .ser_class .left').click(function(){
            clearInterval(myTime)
            var i=left()
            if(i==1){
                myTime = setInterval(function(){left()},6000)
            }
        })

        $('.servant .ser_class .right').click(function(){
            clearInterval(myTime)
            var i=right()
            if(i==1){
                myTime = setInterval(function(){left()},6000)
            }
        })

        $('.servant .scroll>div').click(function(e){
            if($(e.target)[0]==$(".servant .scroll span:nth-child(5)")[0]){
                clearInterval(myTime)
                var i=left()
                if(i==1){
                   myTime = setInterval(function(){left()},6000)
                }
            }
            if($(e.target)[0]==$(".servant .scroll span:nth-child(3)")[0]){
                clearInterval(myTime)
                var i=right()
                if(i==1){
                   myTime = setInterval(function(){left()},6000)
                }
            }
            // else{
            //     var str = $(e.target)
            //     console.log(str,$(".servant .scroll span:nth-child(4)"))
            // }
        })

        var myTime=setInterval(function(){left()},6000)
        
        var left = function(){
            $('.servant .scroll>div').animate({left:'-510px'},300,function(){
                $('.servant .scroll>div').css('left','-255px')
            })
            $('.servant .scroll>div').append($('.servant .scroll>div>span:nth-child(1)'))
            $('.servant .scroll>div>span:nth-child(4)').addClass("show").siblings().removeClass("show")
            var str  = $('.servant .scroll>div>span:nth-child(4)').attr("class")
            var ser  = str.slice(0,5)
            $(`.servant .ser_class ul li.${ser}`).addClass("show").siblings().removeClass("show")

            return 1
        }

        var right = function(){
            $('.servant .scroll>div').prepend($('.servant .scroll>div>span:last-child'))
            $('.servant .scroll>div>span:nth-child(4)').addClass("show").siblings().removeClass("show")
            var str  = $('.servant .scroll>div>span:nth-child(4)').attr("class")
            var ser  = str.slice(0,5)
            $(`.servant .ser_class ul li.${ser}`).addClass("show").siblings().removeClass("show")

            $('.servant .scroll>div').animate({left:'0px'},300,function(){
                $('.servant .scroll>div').css('left','-255px')
            })

            return 1
        }

        // 添加前移事件
        // console.log()
        // $('.servant .scroll span:nth-child(2)').click(function(){
        //     left()
        // })
        // var left=function(){
        //     $('.servant .scroll>div').prepend($('.servant .scroll>div>span:last-child'))
        //     $('.servant .scroll>div>span:nth-child(3)').addClass("show").siblings().removeClass("show")
        //     var str  = $('.servant .scroll>div>span:nth-child(3)').attr("class")
        //     var ser  = str.slice(0,5)
        //     $(`.servant .ser_class ul li.${ser}`).addClass("show").siblings().removeClass("show")
        // }



        // 多从者显示切换
        var x=0
        $('.servant .ser_class li img:nth-child(1)').addClass("show")
        $('.servant .ser_class li').mousemove(function(e){
            x = e.offsetX
            if(x>500){
                $('.servant .ser_class li img:nth-child(2)').addClass("show").siblings().removeClass("show")
            }else{
                $('.servant .ser_class li img:nth-child(1)').addClass("show").siblings().removeClass("show")
            }
        })
            
        
    </script>
</body>
</html>